<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>定血列表</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <style type="text/css">
        .amount-warp {
            display: flex;
            justify-content: center;
        }
        .amount-warp>input {
            width: 50px;
            height: 31px;
            line-height: 30px;
            padding-left: 10px;
            outline: none;
        }
        .amount-warp>.quick-button>i {
            display: block;
            width: 30px;
            height: 16px;
            border-left: none;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
        }
        .border {
            border: 1px solid #a3a3a3;
        }
        .cart-option{
            position: relative;
            height: 40px;
            background-color: #c3c3c3;
            border: 1px solid transparent;
            margin-top: 30px;
        }
        .cart-option>.el-button {
            position: absolute;
            left: 5px;
            top: 2px;
            height: 36px;
        }
        .other-info {
            display: flex;
            float: right;
            margin-right: 0px;
            right: 0;
        }
        .other-info>.el-button {
            margin-top: 2px;
            right: 30px;
            top: 2px;
            height: 36px;
        }
        .other-info>.checkOrder {
            display: flex;
            flex-direction: row;
        }
        .common {
            margin-right: 20PX;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div class="data-manage-table">
        <template>
            <!--购物车展示-->
            <el-table :data="shopCart" style="width: 100%"
                :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                @current-change="" id="out-table" @selection-change="changeBox">
                <el-table-column type="selection" min-width="12.5%" align="center"></el-table-column>

                <el-table-column prop="typeInfo" label="血液类型" min-width="12.5%" align="center">
                </el-table-column>

                <el-table-column prop="aboInfo" label="ABO血型" min-width="12.5%" align="center">
                </el-table-column>

                <el-table-column prop="rhInfo" label="RH血型" min-width="12.5%" align="center">
                </el-table-column>

<!--                <el-table-column prop="bloodPrice" label="单价/元" min-width="12.5%" align="center">-->
<!--                </el-table-column>-->

                <el-table-column label="数量" prop="title" min-width="12.5%" align="center">
                    <template slot-scope="scope">
                        <div class="amount-warp">
                            <input class="border" @change="cartGoodsAmountChange($event,scope.row)" v-model="scope.row.cartAmount" />
                            <div class="quick-button">
                                <i class="border el-icon-arrow-up" @click="addAmountCount(scope.row)"></i>
                                <i class="border el-icon-arrow-down" @click="subtractAmountCount(scope.row)"></i>
                            </div>
                        </div>
                    </template>
                </el-table-column>

<!--                <el-table-column prop="measurementUnit" label="计量单位/ml" min-width="12.5%" align="center">-->
<!--                </el-table-column>-->

                <el-table-column label="总数/ml" min-width="12.5%" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.measurementUnit * scope.row.cartAmount}}</span>
                    </template>
                </el-table-column>

<!--                <el-table-column label="小计/元" min-width="12.5%" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <span>{{scope.row.bloodPrice * scope.row.cartAmount}}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->

                <el-table-column label="操作"  min-width="12.5%" align="center">
                    <template slot-scope="scope" >
                        <el-button size="mini" type="primary" @click="deleteGood(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--底部结算-->
            <div class="cart-option">
                <el-button type="primary" @click="deleteSelected">删除选中血液</el-button>
                <div class="other-info">
                    <div class="checkOrder">
                        <div class="common">已选择<span class="total-num">{{shopCart.length}}</span>件商品</div>
<!--                        <div class="common">总价:<span class="total-price">￥{{totalPrice}}元</span></div>-->
                    </div>
                    <el-button type="primary" @click="submitVisible=true" :disabled="this.shopCart.length == 0">提交</el-button>
                </div>
            </div>

            <!-- 提交订单-->
            <el-dialog title="提示" center :visible.sync="submitVisible" width="335px">
                <!-- 内容的主体区域 -->
                <el-form ref="form" :model="selectOrder" :rules="submitFormRules" label-width="100px" >
                    <el-form-item label="申请人" prop="applicant">
                        <el-input v-model="user.username" readonly style="width:180px; float: right;"></el-input>
                    </el-form-item>
                    <el-form-item label="申请人工号" prop="applicantNumber" >
                        <el-input v-model="user.jobnum" readonly style="width:180px; float: right;"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="申请单位" prop="applyCompany">-->
<!--                        <el-select v-model="selectOrder.applyCompany" style="width: 180px; float: right;">-->
<!--                            <el-option v-for="item in applyCompany" :key="item.value" :label="item.label" :value="item.value">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelSubmit">取 消</el-button>
                    <el-button type="primary" @click="confirmSubmit">确 定</el-button>
                </span>
            </el-dialog>
            
        </template>
    </div>

    <script src="/plugins/vue-2.5.17/vue.js"></script>
    <script src="/plugins/element-2.4.5/index.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/js/axios.min.js"></script>

    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script language="JavaScript" type="text/javascript">
        //Date原型上添加格式转换方法
        Date.prototype.format = function(fmt) {
            const o = {
                "M+": this.getMonth() + 1,                 //月份 
                "d+": this.getDate(),                    //日 
                "h+": this.getHours(),                   //小时 
                "m+": this.getMinutes(),                 //分 
                "s+": this.getSeconds(),                 //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds()             //毫秒 
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(const k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    </script>
    <script>
        (function () {
            const vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        total: 0,   //总记录数
                        current: 1,     //当前页
                        pageSize: 5,      //每页记录数
                        pages: 0,       //总页数

                        submitVisible: false,    //弹出提交对话框

                        totalPrice: 0,  //总价
                        
                        user: {
                            "username": "",
                            "jobnum": "",
                        },
                        
                        //申请单位
                        applyCompany:[
                            {
                                label: "北京协和医院",
                                value: "北京协和医院"
                            },
                            {
                                label: "北京天坛医院",
                                value: "北京天坛医院"
                            },
                            {
                                label: "北京大学第一医院",
                                value: "北京大学第一医院"
                            }
                        ],

                        //提交订单
                        selectOrder: {
                            applicant: '张三（暂定）',  //申请人
                            applicantNumber: '1',    //申请人工号
                            applyCompany: ''    //申请单位
                        },

                        submitFormRules: {
                            applicant: [{required: true, message: '申请人不能为空', trigger: 'blur'}],
                            applicantNumber: [{required: true, message: '申请人工号不能为空', trigger: 'blur'}],
                            // applyCompany: [{required: true, message: '请选择申请单位', trigger: ['blur','change']}],
                        }
                    }
                },

                computed: {
                    //购物车信息
                    shopCart(){
                        let shopCart = JSON.parse(sessionStorage.getItem("shopCart"))
                        console.log(shopCart)
                        if(shopCart != null)
                            return shopCart
                        else 
                            return []
                    },

                    // totalPrice(){
                    //     let sum = 0
                    //     this.shopCart.forEach(function (item, index) {
                    //         sum += item.bloodPrice * item.cartAmount
                    //     })
                    //     return sum
                    // }
                },

                watch: {
                    shopCart:{
                        handler(newValue, oldValue){
                            console.log("深度监听")
                            let sum = 0
                            this.shopCart.forEach(function (item, index) {
                                sum += item.bloodPrice * item.cartAmount
                            })
                            this.totalPrice = sum
                        },
                        deep:true
                    }
                },

                methods: {
                    //输入商品数量
                    cartGoodsAmountChange(e, orderInfo){
                        let value = e.target.value * 1
                        if(value < 1 || isNaN(value))
                            orderInfo.cartAmount = 1
                        else
                            orderInfo.cartAmount = parseInt(value)
                        sessionStorage.setItem("shopCart",JSON.stringify(this.shopCart))
                    },

                    // 商品数量加1
                    addAmountCount(orderInfo) {
                        ++orderInfo.cartAmount
                        sessionStorage.setItem("shopCart",JSON.stringify(this.shopCart))
                        this.updateTotalPrice()
                        // this.addCart(orderInfo)
                    },
                    
                    
                    // 商品数量减1
                    subtractAmountCount(orderInfo) {
                        if (orderInfo.cartAmount <= 1) 
                            return this.$message.error('商品数量不能小于0')
                        else {
                            --orderInfo.cartAmount
                            sessionStorage.setItem("shopCart",JSON.stringify(this.shopCart))
                            this.updateTotalPrice()
                        }
                    },
                    
                    //删除商品
                    deleteGood(index, row){
                        //shopCart数组删除该商品
                        this.shopCart.splice(index, 1)
                        //保存shopCart
                        sessionStorage.setItem("shopCart",JSON.stringify(this.shopCart))
                        this.updateTotalPrice()
                    },

                    //选中的商品
                    changeBox(val) {
                        this.selectedList = []
                        val.forEach((item) => {
                            this.selectedList.push(item)
                        })
                        // console.log(this.selectedList)
                    },
                    
                    //删除选中的商品
                    deleteSelected() {
                        for (var i = 0 ; i < this.selectedList.length; i++) {
                            for (var j =0; j < this.shopCart.length; j++) {
                                if (this.selectedList[i] = this.shopCart[j]) {
                                    this.shopCart.splice(j, 1)
                                }
                            }
                        }
                        sessionStorage.setItem("shopCart",JSON.stringify(this.shopCart))
                        this.updateTotalPrice()
                    },

                    //计算总价
                    updateTotalPrice(){
                        let sum = 0
                        this.shopCart.forEach(function (item, index) {
                            sum += item.bloodPrice * item.cartAmount
                        })
                        this.totalPrice = sum
                    },

                    //取消提交
                    cancelSubmit(){
                        this.submitVisible = false
                    },
                    
                    //确认提交
                    confirmSubmit(){
                        this.submitVisible = false
                        axios({
                            method: "post",
                            url: "/bloodOrder/normal/submitOrder?applicant="+this.selectOrder.applicant+"&applicantNumber="+this.selectOrder.applicantNumber+"&applyCompany="+this.selectOrder.applyCompany,
                            dataType: "json",
                            data: JSON.stringify(this.shopCart),
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8'
                            }
                        }).then(res => {
                            if (res.data.code == '200') {
                                this.submitVisible = false;
                                this.$notify({
                                    tile: '成功',
                                    message: '提交成功',
                                    type: 'success'
                                })
                                sessionStorage.removeItem("shopCart")
                                window.location.href = './goodsList.html'
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '提交失败',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '提交出错',
                            })
                        })
                    }
                },

                mounted() {
                    this.updateTotalPrice()
                    //获取员工数据
                    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                }
            });    
        })()
    </script>

</body>

</html>